<template>
    <div>
        <el-select v-model="value" placeholder="请选择" @change="fill">
            <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
        </el-select>

          <el-button type="primary" @click="loadItem"><i class="iconfont icon-plus"></i>添加展示商品</el-button>
          <!-- <el-button type="danger"><i class="el-icon-delete"></i>批量删除</el-button> -->
        <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            :default-sort = "{prop: 'id'}">
            <!-- @selection-change="handleSelectionChange"> -->
            <!-- <el-table-column
                type="selection"
                width="55">
            </el-table-column> -->
            <el-table-column
                prop="id"
                label="ID"
                width="70"
                sortable>
            </el-table-column>
            <el-table-column
                label="缩略图"
                width="120">
                <template scope="scope">
                        <img :src="tableData[scope.$index].image" style="width:50px">
                    </template>
            </el-table-column>
            <el-table-column
              prop="productId"
              label="展示商品ID">
            </el-table-column>
            <el-table-column
              prop="created"
              sortable
              label="创建日期">
            </el-table-column>
            <el-table-column
              prop="updated"
              sortable
              label="更新日期">
            </el-table-column>
            <el-table-column
              label="操作">
              <template slot-scope="scope">
                <el-button @click="DeleteItem(scope.row)" type="text">删除</el-button>
              </template>
            </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChangeOut"
          @current-change="handleCurrentChangeOut"
          :current-page="currentPageOut"
          :page-sizes="[10,20,50,100]"
          :page-size="limitOut"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalOut">
        </el-pagination>
        
        <el-dialog 
          title="添加展示商品"
          :visible.sync="dialogVisible"
          width="100%"
          :before-close="fill">
          <!-- <el-button type="primary" @click="addItem"><i class="iconfont icon-plus"></i>添加已选择商品</el-button> -->
          <el-table
            :data="itemData"
            tooltip-effect="dark"
            style="width: 100%">
            <el-table-column
                prop="id"
                label="ID"
                sortable>
            </el-table-column>
            <el-table-column
                label="缩略图">
                <template scope="scope">
                  <img :src="itemData[scope.$index].image" style="width:50px">
                </template>
            </el-table-column>
            <el-table-column
                prop="title"
                label="标题"
                sortable
                >
            </el-table-column>
            <el-table-column
                prop="sellPoint"
                label="描述">
            </el-table-column>
            <el-table-column
              prop="price"
              label="单价"
              sortable>
            </el-table-column>
            <el-table-column
              prop="created"
              label="创建"
              sortable>
            </el-table-column>
            <el-table-column
              prop="updated"
              label="更新"
              sortable>
            </el-table-column>
            <el-table-column
              label="操作">
              <template slot-scope="scope">
                <el-button @click="addItem(scope.row)" type="text">添加</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10,20,50,100]"
                :page-size="limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
          </el-pagination>
        </el-dialog>
        
    </div>
    
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      total: 0,
      limit: 10,
      currentPageOut: 1,
      totalOut: 0,
      limitOut: 10,
      options: [],
      value: "",
      tableData: [],
      itemData: [],
      multipleSelection: [],
      dialogVisible: false
    };
  },
  methods: {
    handleSizeChange(limit) {
      this.limit = limit;
      this.loadItem();
    },
    handleCurrentChange(currentChange) {
      this.currentPage = currentChange;
      this.loadItem();
    },
    handleSizeChangeOut(limit) {
      this.limitOut = limit;
      this.loadItem();
    },
    handleCurrentChangeOut(currentChange) {
      this.currentPageOut = currentChange;
      this.loadItem();
    },
    // handleSelectionChange(val) {
    //   this.multipleSelection = val;
    // },

    // 填充栏目内容
    fill() {
      this.$axios
        .get(API.rootPath + "/contents", {
          params: {
            offset: this.limitOut * (this.currentPageOut - 1),
            limit: this.limitOut,
            categoryId: this.value
          }
        })
        .then(response => {
          this.tableData = response.data.data.rows;
          this.totalOut = response.data.data.total;
        });
      this.dialogVisible = false
    },

    // 加载商品内容
    loadItem() {
      if (this.value == "") {
        this.$message({
          message: "请选择栏目",
          type: "warning",
          showClose: true
        })
        return;
      }
      this.dialogVisible = true;
      this.$axios.get(API.rootPath + "/items",{
        params: {
          offset: this.limit * (this.currentPage - 1),
          limit: this.limit,
          categoryId: this.value
        }
      }).then(response => {
        this.itemData = response.data.data.rows;
        this.total = response.data.data.total;
      })
    },

    // 添加商品到当前栏目
    addItem(rows) {
      this.$axios.post(API.rootPath + "/contents",
          {
            categoryId: this.value,
            productId: rows.id,
            created: rows.created,
            updated: rows.updated,
            image: rows.image
          }
        ).then((response) => {
          if (response.data.status == 0) {
            this.$message({
              message: "保存成功",
              type: "success"
            })
            this.loadItem()
          }
        })
    },

    // 从当前栏目删除
    DeleteItem(item) {
      this.$axios.delete(API.rootPath + "/contents/" + item.id)
        .then((response) => {
          if (response.data.status == 0) {
            this.$message({
              message: "删除成功",
              type: "success"
            })
            this.fill()
          }
        })
    },
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    }
  },
  created() {
    this.$http.get(API.rootPath + "/content-categorys").then(response => {
      this.options = response.body.data.rows;
      this.value = this.options[0].id
    });
  }
};
</script>